/**
 * Created by jiangtao on 2017/9/20.
 */
import React ,{ PureComponent , PropTypes } from 'react';

import { getSize } from './../common/util';

import styles from './../styles/index.style.scss';

import {
    Layout,
    Header,
    ScrollView,
    Image,
    Banner
} from './../components';

import mirrorx , {
    connect,
    actions,
    Route
} from 'mirrorx';

class Index extends PureComponent {
    constructor(){
        super();
        this.state = {
            activeIndex:0
        };
        this.subNav = [
            {name:"私人FM",className:"nav_icon_fm"},
            {name:"每日推荐",className:"nav_icon_ca"},
            {name:"歌单",className:"nav_icon_music"},
            {name:"排行榜",className:"nav_icon_sort"}
        ]
    }

    swipeOptions = {
        auto:4000,
        continuous: true,
        stopPropagation:true,
        callback: i => {
            this.setState({ activeIndex:i })
        }
    };

    static contextTypes ={
        size:PropTypes.shape({
            width:PropTypes.number,
            height:PropTypes.number
        })
    };

    componentDidMount() {
        this.timeout = setTimeout(()=>{
            actions.indexState.getBannerAsync();
            actions.indexState.getDaySongSheetAsync();
            actions.indexState.getArtistsAsync();
        },600)
    }

    componentWillUnmount(){
        clearTimeout(this.timeout);
    }

    getPlaycount(count){
        if (!count) return null;
        return count > 10000 ? (count /10000).toFixed(0)+'万' : count;
    }

    renderCenter(){
        return (
            <Search />
        )
    }

    scrollY = 0;

    onScroll({ scroller }){
        this.scrollY = scroller.y;
    }

    pushAction(key, item ){
       const { routing } =actions;
       switch (key){
           case "recommend" :routing.push(`/musicList/${item.id}`);break;
       }
       actions.indexState.saveScrolly(this.scrollY);
    }

    render () {
        const { indexState } = this.props;
        const { activeIndex } = this.state;
        const { width } = getSize();

        const {
            banners,
            recommend,
            artistsList,
            scrollY
        } = indexState;

        const classify =[
            {key:"recommend",value:recommend ,name :"推荐歌单"},
            {key:"artistsList",value:artistsList,name:"热门歌手"}
        ];

        return(
            <ScrollView
                scrollToY={scrollY}
                scroll={e=>{
                    this.iScroll = e;
                }}
                onScroll={e=>this.onScroll(e)}
            >
                <div className={styles.music_page}>
                    <Banner>
                        {banners.map(( banner , i ) => {
                            return (
                                <Image
                                    key={i}
                                    src={banner.pic}
                                    className={styles.banner_item}
                                    animate={false}
                                />
                            )
                        })}
                    </Banner>
                    {classify.map(( { key ,value , name } , j )=> {
                        return !!value.length && (
                            <div className={styles.item_classify} key={j}>
                                <div className={styles.title}>
                                    <span>{name}</span>
                                    <i className={styles.right_arrow} />
                                </div>
                                <ul className={styles.item_wrapper}>
                                    {value.map(( item , i ) => {
                                        return (
                                            <li
                                                className={styles.music_item}
                                                key={i}
                                                onClick={()=>this.pushAction(key,item)}
                                            >
                                                <div
                                                    style={{height:width * .32}}
                                                    className={styles.music_item_cover}
                                                >
                                                    {!!item.playCount &&
                                                    <div className={styles.play_number}>
                                                        { this.getPlaycount(item.playCount) }
                                                    </div>
                                                    }
                                                    <Image
                                                        src={item.picUrl}
                                                        lazyLoad={true}
                                                    />
                                                </div>
                                                <p className={styles.music_item_title}>
                                                    {item.name}
                                                </p>
                                            </li>
                                        )
                                    })}
                                </ul>
                            </div>
                        )
                    })}
                </div>
            </ScrollView>
        )
    }
}


const Search = props => {
    return (
        <div className={styles.search_top}>
            <div className={styles.left}>
                <div className={styles.music}>

                </div>
            </div>
            <div className={styles.center}>
                <div className={styles.div_input}>
                    <span>搜索音乐、视频、歌词、电台</span>
                </div>
            </div>
        </div>
    )
};



export default connect( state => ({
    indexState:state.indexState
}))( props => <Index {...props}/> );

